<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin_fragments :: head(管理后台欢迎页)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻发布系统管理</title>

</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <label style="margin-right: 5px">请选择条件</label>
                    <div class="layui-inline layui-show-xs-block layui-col-space5 layui-form">
                        <select id="selectedProvince" name="typeName">
                            <option value="" disabled selected>请选择</option>
                            <option value="广西">广西</option>
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                            <option value="天津">天津</option>
                            <option value="重庆">重庆</option>
                            <option value="河北">河北</option>
                            <option value="山西">山西</option>
                            <option value="辽宁">辽宁</option>
                            <option value="吉林">吉林</option>
                            <option value="黑龙江">黑龙江</option>
                            <option value="江苏">江苏</option>
                            <option value="浙江">浙江</option>
                            <option value="安徽">安徽</option>
                            <option value="福建">福建</option>
                            <option value="江西">江西</option>
                            <option value="山东">山东</option>
                            <option value="河南">河南</option>
                            <option value="湖北">湖北</option>
                            <option value="湖南">湖南</option>
                            <option value="广东">广东</option>
                            <option value="广西">广西</option>
                            <option value="海南">海南</option>
                            <option value="四川">四川</option>
                            <option value="贵州">贵州</option>
                            <option value="云南">云南</option>
                            <option value="西藏">西藏</option>
                            <option value="陕西">陕西</option>
                            <option value="甘肃">甘肃</option>
                            <option value="青海">青海</option>
                            <option value="宁夏">宁夏</option>
                            <option value="新疆">新疆</option>
                            <option value="台湾">台湾</option>
                            <option value="香港">香港</option>
                            <option value="澳门">澳门</option>
                        </select>
                    </div>
                    <div class="layui-inline layui-show-xs-block layui-col-space5 layui-form">
                        <select id="selectedYear" name="typeName">
                            <option value="" disabled selected>请选择</option>
                            <option value="2018">2018</option>
                            <option value="2019">2019</option>
                            <option value="2020">2020</option>
                            <option value="2021">2021</option>
                        </select>
                    </div>
                    <div class="layui-inline layui-show-xs-block layui-col-space5 layui-form">
                        <select id="selectedMonth" name="typeName">
                            <option value="" disabled selected>请选择</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                        </select>
                    </div>

                    <!--搜索按钮-->
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn " id="search_btn" lay-submit="" lay-filter="search"><i
                                class="layui-icon">&#xe615;</i></button>
                    </div>
                </div>

            </div>
            <div class="layui-card ">
                <div class="layui-panel">
                    <div style="padding: 18px; display: flex; justify-content: center">
                        <span id="title" style="font-size: 15px">2018年~2021年平均价格统计</span>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="map">
                        <div class="chart layui-col-sm12">图表模块</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="admin_fragments :: script"></div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script th:src="@{/js/china.js}"></script>
<!--    地图样式-->
<script th:inline="javascript">
    /*<![CDATA[*/
    const title = document.querySelector('#title');
    var intervalId;
    layui.use(['form'], function() {
        var form = layui.form;
        var $ = layui.jquery;
        // 初始化选择框
        form.render('select');

        $(document).on('click', '#search_btn', function (data) {
            data.preventDefault()
            var selectedProvince = $('#selectedProvince').val();
            var selectedYear = $('#selectedYear').val();
            var selectedMonth = $('#selectedMonth').val();
            clearInterval(intervalId);
            loadDataAndRenderMap(selectedProvince, selectedYear, selectedMonth); // 调用新创建的函数以加载数据并显示地图
        })
    });

    function loadDataAndRenderMap(province, year, month) {

        var chartDom = document.querySelector('.map .chart');
        var myChart = echarts.init(chartDom);
        var option;

        const categories = [];
        const data = [];
        const maxPriceData = []; // 新增
        let numberOfDataPointsToShow = 5;

        async function fetchData() {
            const response = await fetch('/data/province/year/month/days?province=' + province + '&year=' + year + '&month=' + month);
            const priceDataList = await response.json();
            title.textContent = province + '省' + year + '年' + month +'月所有天数的价格变化';
            layer.alert('查询成功！', {icon: 1}, function(index){
                layer.close(index);
            });
            for (let i = 0; i < numberOfDataPointsToShow && i < priceDataList.length; i++) {
                categories.push(priceDataList[i].month + '-' + priceDataList[i].day);
                data.push(priceDataList[i].averagePrice);
                maxPriceData.push(priceDataList[i].maxPrice); // 新增
            }
            updateChart();

            intervalId = setInterval(function () {
                if (priceDataList.length > numberOfDataPointsToShow) {
                    categories.shift();
                    data.shift();
                    maxPriceData.shift(); // 新增

                    const nextDataPoint = priceDataList.slice(numberOfDataPointsToShow).shift();
                    categories.push(nextDataPoint.month + '-' + nextDataPoint.day);
                    data.push(nextDataPoint.averagePrice);
                    maxPriceData.push(nextDataPoint.maxPrice); // 新增
                    numberOfDataPointsToShow++;

                    updateChart();
                }
            }, 2100);
        }

        function updateChart() {
            myChart.setOption({
                xAxis: {
                    data: categories
                },
                series: [
                    {
                        data: maxPriceData
                    },
                    {
                        data: data
                    }
                ]
            });
        }

        option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#283b56'
                    }
                }
            },
            legend: {
                data: ['最高价格', '平均价格']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { readOnly: false },
                    restore: {},
                    saveAsImage: {}
                }
            },
            dataZoom: {
                show: false,
                start: 0,
                end: 100
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: categories
            },
            yAxis: {
                type: 'value',
                scale: true,
                name: 'Price',
                min: 0,
                boundaryGap: [0.2, 0.2]
            },
            series: [
                {
                    name: '最高价格',
                    type: 'bar',
                    data: maxPriceData
                },
                {
                    name: '平均价格',
                    type: 'line',
                    data: data
                }
            ]
        };

        option && myChart.setOption(option);

        fetchData();
    }
    /*]]>*/
</script>
<script>
    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    $(document).ready(function () {
        $('.ui.accordion').accordion({duration: 'click'});
        $('.ui.dropdown').dropdown();

        title.textContent = '广西省2018年1月所有天数的价格变化';

        loadDataAndRenderMap("广西", "2018", "1"); // 页面加载时显示2018年的地图数据
    });
</script>
</body>
</html>